<template>
  <div style="min-width: 300px;width: 100%;">
    <el-form label-position="left" label-width="120px">
      <el-form-item :label="$t('Online')">
        <i v-if="device.online" class="el-icon-success success">{{
            $t("Yes")
          }}</i>
        <i v-else class="el-icon-error info">{{ $t("No") }}</i>
        <!-- <el-switch :value="device.online" :active-text="$t('Yes')" :inactive-text="$t('No')"></el-switch> -->
      </el-form-item>
      <el-form-item :label="$t('common.OnOff')">
        <span v-if="device.state === 1">
          <i class="el-icon-open success" /> {{ $t('On') }}
        </span>
        <span v-else>
          <i class="el-icon-turn-off info" /> {{ $t('Off') }}
        </span>
      </el-form-item>
    </el-form>
    <el-button :type="buttonType" @click="deviceCommand('On',null,$t('On'))" :disabled="commanding"
      class="button-fixed">
      {{ $t('On') }}
    </el-button>
    <el-button :type="buttonType" @click="deviceCommand('Off',null,$t('Off'))" :disabled="commanding"
      class="button-fixed">
      {{ $t('Off') }}
    </el-button>
    <div v-if="device.online">
      <div v-for="(item,index) in device.states" :key="'air_switch_'+index">
        <span v-if="item !== null">
          <el-button :type="buttonType" @click="deviceCommand('On',null,$t('On'))"
            :disabled="item.state === 1 || commanding" class="button-fixed">
            {{ $t('On') }}
          </el-button>
          <el-button :type="buttonType" @click="deviceCommand('Off',null,$t('Off'))"
            :disabled="item.state === 0 || commanding" class="button-fixed">
            {{ $t('Off') }}
          </el-button>
          <el-button :type="buttonType" @click="deviceCommand('Open',null,$t('Open'))" :disabled="commanding"
            class="button-fixed">
            {{ $t('Open') }}
          </el-button>
        </span>
      </div>
    </div>
  </div>
</template>
<script>
  import BaseController from "./BaseController";
  export default {
    name: "AirSwitchController",
    mixins: [BaseController],
    methods: {
      setItemDevice(data) {
        // console.log('air switch controller', data)
        const {
          online,
          state,
        } = data;
        Object.assign(this.device, {
          online,
          state,
        });
        this.$emit("input", this.device);
      }
    },
  };

</script>
